<template>
  <div class="Transfers" v-loading="loading">
    <div class="Transfers-type">
      <div style="margin-top: 10px">
        <div class="star" style="width: 100px; margin-bottom: 10px">
          申请原因
        </div>
        <el-input
          style="width: 500px"
          v-model="reason"
          placeholder="请输入申请原因（请勿使用回车键）"
          size="mini"
          type="textarea"
          clearable
        >
        </el-input>
      </div>
    </div>
    <div class="Transfers-plan">
      <div class="line">添加数据</div>
      <div style="display: flex">
        <el-upload
          action="https://ssy.13yu.com/index.php/Admin/Excel/sale_timesExcel"
          :headers="headers"
          :on-success="handleSuccess"
        >
          <el-button size="mini" style="margin-right: 10px" type="primary"
            >批量导入</el-button
          >
        </el-upload>
        <el-button size="mini" style="margin-right: 20px" @click="onDownload"
          >下载示例</el-button
        >
      </div>
      <div class="Transfers-list">
        <div class="Transfers-list-module" style="width: 100%">
          <div class="Transfers-list-module-content myscroll">
            <el-table size="mini" :data="list" style="width: 100%">
              <!-- <el-table-column prop="img" label="图片" width="80">
                <template slot-scope="{ row }">
                  <el-image v-if="row.img" style="width: 50px; height: 50px" :src="row.img" fit="contain"
                    :preview-src-list="[row.img]"></el-image>
                </template>
              </el-table-column> -->
              <!-- <el-table-column prop="type_name" label="款名" align="center"> </el-table-column> -->
              <el-table-column
                prop="allocation_number"
                label="借出单号"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="sku" label="SKU" align="center">
              </el-table-column>
              <el-table-column prop="num" label="数量" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="summary">
      <div>
        共 <span style="color: red">{{ detail.num }}</span> 件
      </div>
    </div> -->
    <el-button
      size="mini"
      style="margin: 0 20px"
      type="primary"
      @click="onSubmit"
      :disabled="!reason || !identification"
      >提交</el-button
    >
    <el-dialog :visible.sync="dialogVisibleImage" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
  
<script>
import {
  postAdminOmsGetAllocationType,
  postAdminOmsgetlogisticsCompanyCode,
  postAdminOmsgetsale_timesExcel_listdetail,
  postAdminOmsgetsale_timesExcel,
  postAdminOmsaddsale_timesExcel,
} from "@/api";
import { regionData } from "element-china-area-data";
import { floatMultiply, floatAdd } from "@/utils/algorithm.js";
import { getStore } from "@/utils/localStorage.js";
export default {
  data() {
    return {
      loading: false,
      headers: {},
      dialogVisibleImage: false,
      dialogImageUrl: "",
      reason: "",
      identification: "",
      list: [],
    };
  },
  mounted() {
    this.headers = {
      token: getStore("userinfo").token,
    };
  },
  methods: {
    onDownload(row) {
      window.open(
        "https://ssy.13yu.com/Public/excel/moban/%E8%BD%AC%E9%94%80%E5%94%AE%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
      );
    },
    async onSubmit() {
      let { reason, identification } = this;
      let obj = {
        reason,
        identification,
      };
      let res = await postAdminOmsaddsale_timesExcel(obj);
      this.$message.success("提交成功");
      this.reason = "";
      this.identification = "";
      this.list = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    async postAdminOmsgetsale_timesExcel_listdetail() {
      let allocation_number = this.$route.query.allocation_number;
      let obj = {
        allocation_number,
      };
      let res = await postAdminOmsgetsale_timesExcel_listdetail(obj);
      this.detail = res.data;
      console.log("res", res);
    },
    changeselectCouriertype(e) {
      console.log("e", e);
      if (e != "快递") {
        this.remark = e;
      } else {
        this.remark = "";
      }
    },
    async postAdminOmsgetlogisticsCompanyCode() {
      let res = await postAdminOmsgetlogisticsCompanyCode();
      this.Courier = res.data;
    },
    handleChangeCourier(val) {
      this.transport_type = this.Courier.find(
        (item) => item.logistics_company_code == val
      ).logistics_company_name;
    },
    // 省市区
    handleChange(e) {
      if (e.length) {
        let label = this.$refs.cascaderlabel.getCheckedNodes();
        let arr = label[0].pathLabels;
        this.wp_province = arr[0];
        this.wp_city = arr[1];
        this.wp_area = arr[2];
      } else {
        this.wp_province = "";
        this.wp_city = "";
        this.wp_area = "";
      }
    },
    onInput(e, index) {
      let { TableDataSelect } = this;
      let tmpObj = TableDataSelect[index];
      if (Number(e)) {
        tmpObj.num = e;
        if (tmpObj.selling_price) {
          tmpObj.zh_price = floatMultiply(
            floatMultiply(Number(tmpObj.selling_price), 0.68),
            e
          );
        } else {
          tmpObj.zh_price = 0;
        }
      } else {
        tmpObj.num = 1;
        if (tmpObj.selling_price) {
          tmpObj.zh_price = floatMultiply(Number(tmpObj.selling_price), 0.68);
        } else {
          tmpObj.zh_price = 0;
        }
      }
      this.$set(this.TableDataSelect, index, tmpObj);
      this.TableDataSelectSummary();
    },
    onInputSelling_price(e, index) {
      let { TableDataSelect } = this;
      let tmpObj = TableDataSelect[index];
      if (Number(e)) {
        tmpObj.selling_price = e;
        if (tmpObj.num) {
          tmpObj.zh_price = floatMultiply(
            floatMultiply(Number(tmpObj.selling_price), 0.68),
            tmpObj.num
          );
        } else {
          tmpObj.zh_price = 0;
        }
      } else {
        tmpObj.selling_price = "";
        tmpObj.zh_price = 0;
      }
      this.$set(this.TableDataSelect, index, tmpObj);
      this.TableDataSelectSummary();
    },
    async onSearch() {
      let { number } = this;
      let obj = {
        number,
      };
      let res = await postAdminOmsGetAllocationType(obj);
      this.tableData = res.data;
      this.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onAdd() {
      let { multipleSelection, TableDataSelect } = this;
      multipleSelection = multipleSelection.map((e) => {
        e.num = 1;
        e.selling_price = "";
        return e;
      });
      let arr = [];
      for (let index = 0; index < multipleSelection.length; index++) {
        let is = TableDataSelect.some((e) => {
          return e.sku_code == multipleSelection[index].sku_code;
        });
        if (!is) {
          let obj = {
            ...multipleSelection[index],
            zh_price: floatMultiply(
              Number(multipleSelection[index].selling_price),
              0.68
            ),
          };
          console.log("obj", obj);
          arr.push(obj);
        }
      }
      TableDataSelect.push(...arr);
      this.TableDataSelect = TableDataSelect;
    },
    onDelete(e) {
      let { TableDataSelect } = this;
      this.$confirm("确定删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          TableDataSelect.splice(e, 1);
          this.TableDataSelect = TableDataSelect;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async handleSuccess(response) {
      console.log("response", response);
      let identification = response.data.identification;
      this.identification = identification;
      let obj = {
        identification,
      };
      let res = await postAdminOmsgetsale_timesExcel(obj);
      console.log("res.data.list", res);
      this.list = res.data;
    },
    handleRemovesXJ(file) {
      let { images } = this;
      let index = images.findIndex((e) => e.url == file.url);
      images.splice(index, 1);
      this.images = images;
      return true;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
  },
};
</script>
  
<style lang="scss" scoped>
.fileimg {
  width: 146px;
  height: 146px;
  margin-right: 10px;

  > img {
    object-fit: contain;
    width: 146px;
    height: 146px;
  }
}

.summary {
  margin-top: 10px;
  border: 1px dashed #999;
  display: flex;
  padding: 10px;
  justify-content: center;

  > div {
    padding: 0 20px;

    > span {
      font-weight: 600;
    }
  }
}

.info {
  display: flex;
  margin-top: 15px;

  > div {
    margin-right: 20px;

    > :nth-child(1) {
      font-size: 12px;
      margin-bottom: 10px;
    }

    > div:nth-child(2) {
      display: flex;
      align-items: center;
    }
  }
}

.myscroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

.myscroll::-webkit-scrollbar {
  display: none;
}

// 隐藏滚动条
.Transfers {
  background: #fff;
  font-size: 14px;
  padding: 20px 0;

  .Transfers-type {
    // display: flex;
    // align-items: center;

    > div {
      // padding: 10px 20px;
      margin: 0 20px 10px;
      // background: #efefef;
      border-radius: 8px;

      > div:nth-child(1) {
        font-weight: 600;
      }

      > div:nth-child(2) {
        color: red;
      }
    }

    > div:nth-child(2) {
      padding: 10px 20px;
      margin: 0 20px 10px;
      background: #efefef;
      border-radius: 8px;

      > div:nth-child(1) {
        font-weight: 400;
      }

      > div:nth-child(2) {
        color: #333;
        margin-left: 10px;

        > div {
          > span {
            margin-left: 10px;
            color: #2c70d6;
          }
        }
      }
    }
  }

  .Transfers-plan {
    padding: 10px 20px;
    /deep/ .el-upload-list {
      display: none;
    }
    > div:nth-child(1) {
      font-weight: 600;
      margin-bottom: 20px;
    }

    .Transfers-list {
      display: flex;
      align-items: center;

      .Transfers-list-module {
        border: 1px solid #efefef;
        width: 600px;
        border-radius: 4px;

        .Transfers-list-module-search {
          padding: 0 20px;
          height: 48px;
          display: flex;
          align-items: center;
          background-color: #f5f7fa;
          font-weight: 600;
          font-size: 12px;
        }

        .Transfers-list-module-content {
          // height: 400px;

          /deep/ .el-table__row {
            height: 53px;
          }
        }
      }
    }
  }
}
</style>